<template>
  <div class="email">
    <div class="header">
      <div class="header-left">修改邮箱</div>
      <div class="header-right" @click="closeDialog">
        <i class="iconfont iconcuowu"></i>
      </div>
    </div>
    <Input label="邮箱" v-model="email" :readonly="true"></Input>

    <Input label="新邮箱" v-model="newEmail"></Input>
    <Input v-model="codeValue" type="num" placeholder="输入验证码" label="邮箱验证码:">
      <template #button>
        <Button
          style="margin-left: 8px; flex-basis: 100px"
          :disabled="buttonDisabled"
          @click="sendValidCode"
          >{{ buttonText }}</Button
        >
      </template>
    </Input>
    <div class="footer">
      <Button @click="confirmChangeEmail">确认</Button>
      <Button type="error" @click="closeDialog">取消</Button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, defineEmits, computed, onMounted } from "vue";
import Input from "./input.vue";
import Button from "./button.vue";
import axios from "@/http";
import msg from "@/components/msg/msg";
import confirm from "@/components/confirm/tip";
import { useUserStore } from "@/store";
const emit = defineEmits(["closeDialog"]);
const codeValue = ref<string>("");
const email = ref<string>("");
const newEmail = ref<string>("");
const buttonText = ref<string | number>("发送验证码");
const buttonDisabled = ref<boolean>(false);
const timer = ref<number | null>(null);
const store = useUserStore();

const closeDialog = () => {
  emit("closeDialog");
};
const userInfo = computed(() => store.user);
onMounted(() => {
  email.value = userInfo.value.email || "当前未绑定邮箱";
});
const sendValidCode = () => {
  if (buttonDisabled.value === true) return;
  if (!newEmail.value) return msg.error("请输入新邮箱");
  axios
    .post("/user/sendEmailCode", {
      email: newEmail.value,
      id: userInfo.value.id,
    })
    .then((res) => {
      if (res.data.error === -1) {
        msg.success("邮件发送成功");
        handleCode();
      }
    });
};
const handleCode = () => {
  buttonDisabled.value = true;
  buttonText.value = 60;
  timer.value = setInterval(() => {
    typeof buttonText.value === "number" && buttonText.value--;
    if (typeof buttonText.value === 'number' && buttonText.value < 0) {
      buttonText.value = "发送验证码";
      buttonDisabled.value = false;
      timer.value && clearInterval(timer.value);
    }
  }, 1000);
};
const confirmChangeEmail = () => {
  if (!newEmail.value) return msg.error("新邮箱不能为空!");
  if (!newEmail.value) return msg.error("新邮箱不能为空!");
  confirm("确定要修改邮箱吗", () => {
    axios
      .post("/user/validEmailCode", {
        id: userInfo.value.id,
        email: newEmail.value,
        code: codeValue.value,
      })
      .then((res) => {
        if (res.data.error === -1) {
          store.setUser({ ...userInfo.value, email: newEmail.value });
          codeValue.value = "";
          newEmail.value = "";
          msg.success("邮箱更新成功");
          emit("closeDialog");
        } else {
          msg.error("邮箱更新失败");
        }
        console.log(res);
      });
  });
  return;
};
</script>

<style lang="scss" scoped>
.email {
  width: 400px;
  height: 300px;
  background-color: rgba($color: #000, $alpha: 0.8);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 50px;
  margin: auto;
  padding: 20px 30px;
  border-radius: 12px;
  box-shadow: 0 0 10px 0 #888;
  .header {
    display: flex;
    color: #fff;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 17px;
    &-right {
      font-weight: bolder;
      transition: all 0.2s;
      &:hover {
        transform: scale(1.3);
      }
    }
  }
  .footer {
    margin: 18px 0;
    display: flex;
    justify-content: space-between;
  }
}
</style>
